import * as React from 'react';


export interface AttachmentProps {
    className: string;
    title: string;
    id: string;
    uploading?: boolean;
    percent?: number;
    type: string;
    subtype: string;
    sizes?: any;
    size: any;
    image?: {src:string;};
    icon?: string;
    filename: string;
    buttons: {close: boolean; check: boolean};
    can: {save: boolean};
    describe: boolean;
    allowLocalEdits?: boolean;
    caption?: string;
    orientation?: string;
}

export interface AttachmentState {
}

export class Attachment extends React.Component<AttachmentProps, AttachmentState> {
    render() {
        let {type = "", title, id, subtype, orientation, className = ""} =  this.props;
        return (
            <div className={'attachment ' + className} tabIndex={0} role="checkbox" aria-label={title} aria-checked={false} data-id={id}>
                <div className={"attachment-preview js--select-attachment type-" + type + " subtype-" + subtype + " " +  orientation}>
                    {this.renderThumbnail()}
                    {this.renderCloseButton()}
                </div>
                {this.renderCheckButton()}
                {this.renderDescribe()}
            </div>
        );
    }

    renderDescribe() {
        let {describe, type, caption, title} = this.props;
        let maybeReadOnly = this.props.can.save || this.props.allowLocalEdits ? false : true;
        if (describe) {
            if (type === 'image') {
                return <input type="text" value={caption} className="describe" readOnly={maybeReadOnly}/>;
            } else {
                return <input type="text" value={title} className="describe" readOnly={maybeReadOnly} />;
            }
        }
    }

    renderCloseButton() {
        if (this.props.buttons.close) {
            return <button type="button" className="button-link attachment-close media-modal-icon"><span className="screen-reader-text">移除</span></button>
        } else {
            return null;
        }
    }

    renderCheckButton() {
        if (this.props.buttons.check) {
            return <button type="button" className="button-link check" tabIndex={-1}><span className="media-modal-icon" /><span className="screen-reader-text">取消选择</span></button>
        }
    }

    renderThumbnail() {
        if (this.props.uploading) {
            return (
                <div className="thumbnail">
                    <div className="media-progress-bar">
                        <div style={{width: this.props.percent + "%"}}></div>
                    </div>
                </div>
            );
        } else if (this.props.type === 'image' && this.props.sizes) {
            return (
                <div className="thumbnail">
                    <div className="centered">
                        <img src={this.props.size.url} draggable={false} alt="" />
                    </div>
                </div>
            );
        } else {
            return (
                <div className="thumbnail">
                    <div className="centered">
                        {this.renderImage()}
                    </div>
                    <div className="filename">
                        <div>{this.props.filename}</div>
                    </div>
                </div>
            );
        }
    }

    renderImage() {
        let {image, icon} = this.props;
        if (image && image.src && image.src !== icon)  {
            return <img src={image.src} className="thumbnail" draggable={false} alt="" />
        } else {
            return <img src={icon} className="icon" draggable={false} alt="" />
        }
    }
}
